<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			canvas{border: 1px solid #333;}
		</style>
	</head>
	<body>
		<canvas width="600" height="400"></canvas>
	</body>
	<script type="text/javascript">
		let canvas=document.querySelector("canvas");
		let ctx=canvas.getContext("2d");
		
		//设置径向渐变
		let radialGradient=ctx.createRadialGradient(100,0,100,0,0,200)
		radialGradient.addColorStop(0,"orangered");
		radialGradient.addColorStop(1,"green");
		
		//绘制圆
		ctx.translate(300,200)
		ctx.arc(0,0,200,0,Math.PI*2,false)
		// ctx.fillStyle="orangered"
		ctx.fillStyle=radialGradient;
		ctx.fill()

	</script>
</html>